<template>
  <div class="tabbar">
      <ul>
        <li>
          <router-link to="/home">
            <i class="fa fa-home" style="font-size: 0.8rem"></i>
            <span>首页</span>
          </router-link>
        </li>
        <li>
          <router-link to="/classify">
            <i class="fa fa-th-large"></i>
            <span>分类</span>
          </router-link>
        </li>
        <li>
          <router-link to="/publish">
            <i class="fa fa-plus"></i>
            <span>发布</span>
          </router-link>
        </li>
        <li>
          <router-link to="/profile">
            <i class="fa fa-user-md"></i>
            <span>我的</span>
          </router-link>
        </li>
      </ul>
  </div>
</template>

<script>
export default {
  name: "TabBar"
}
</script>

<style scoped>
  .router-link-exact-active{
    text-decoration: none;
    color: #FF0033;
  }
  a{
    text-decoration: none;
    color: #666666;
  }
  .tabbar{
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 1.4rem;
    background-color: whitesmoke;
  }
  .tabbar ul{
    text-align: center;
    width: 100%;
    height: 1.4rem;
  }
  .tabbar ul li{
    display: inline-block;
    list-style: none;
    width: 25%;
    height: 1.4rem;
    line-height: 1.4rem;
    float: left;
  }
  .tabbar ul li i{
    display: block;
    font-size: 0.7rem;
    height: 0.9rem;
    line-height: 0.9rem;
    width: 100%;
  }
  .tabbar ul li span{
    display: block;
    width: 100%;
    height: 0.7rem;
    line-height: 0.7rem;
    font-size: 0.5rem;
    margin-top: -0.2rem;
  }
</style>